<template>
  <div style="background-color: #f1dfdf; height: 100px; display: flex;">
    <div style="width: 16%; margin: auto; margin-top: 40px;">
      <nut-avatar size="large">
        <img :src="url" />
      </nut-avatar>
      <h1 style="margin-top: 20px; margin-left: 15px; z-index: 1; position: relative">{{userInfo?.realName}}</h1>
    </div>
  </div>
  <div>
    <nut-date-picker style="background-color: #f1dfdf; " v-model="val" :min-date="min" :max-date="max"
      :three-dimensional="false" @change="getshoppingCart">
    </nut-date-picker>
  </div>
  <!-- 菜品展示-->
  <nut-grid :gutter="10" :border="false">
    <nut-grid-item v-for="item in menus" :key="item.id" :text="item.dishesName">
      <div>
        <nut-avatar size="large">
          <img :src="item.dishesPicture" />
        </nut-avatar>
      </div>
    </nut-grid-item>
  </nut-grid>
  <div class="sidebar-container">
    <nut-button class="sidebar-button" type="primary" open-type="contact">在线客服</nut-button>
  </div>
  

</template>
<script setup>
  import { ref } from 'vue'
  import Taro, { useDidShow } from '@tarojs/taro'
  import { shoppingCart } from '../../api/index';
  // 当前用户
  const userInfo = ref({ realName: "" });
  // 单品列表
  const menus = ref([]);
  const url = 'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'

  const min = new Date(2024, 1, 1)
  const max = new Date(2030, 12, 31)
  const val = ref(new Date())

  // 组件创建时获取导航数据
  useDidShow(() => {
    userInfo.value = Taro.getStorageSync('loginData');
    getshoppingCart();
  })

  // 查询已点历史菜品
  const getshoppingCart = () => {
    console.log("日期参数", val.value)
    let param = {
      // 已点时间
      orderFlag: 1,
      mealDate: formatDate(val.value)
    }
    console.log("参数", param)
    shoppingCart(param).then(res => {
      if (res.data.code === 200) {
        menus.value = res.data.data;
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })
  }
  const formatDate = (value) => {
    // 使用正则表达式匹配时间戳
    const date = new Date(value);
    const year = date.getFullYear();
    // 月份从0开始，所以需要+1并且保证两位数
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    // 日期保证两位数
    const day = ('0' + date.getDate()).slice(-2);
    // 拼接成 yyyy-mm-dd 格式
    return `${year}-${month}-${day}`;
  }
</script>
<style>
  picker-view {
    height: 400rpx !important;
  }
  
  .nut-picker__left {
    font-size: var(--nut-picker-bar-cancel-font-size, 0rpx);
  }
  
  .sidebar-container {
  position: fixed;
  top: 75%;
  right: -40px;
  transform: translateY(-50%);
  z-index: 1000; /* 确保按钮在其他内容之上 */
}
 
.sidebar-button {
  width: 200px; /* 按钮宽度 */
  height: 100px; /* 按钮高度 */
}
</style>